<template>
  <div style="width: 100%; height: 100%" class="bgu">
    <div class="header"></div>
    <!-- <div class="check">
      <el-checkbox v-model="checked1" @change="checkChange">高铁</el-checkbox>
      <el-checkbox v-model="checked2" @change="checkChange">普铁</el-checkbox>
    </div> -->
    <div class="content">
      <div class="row">
        <div style="height: 32%" class="rowRadius">
          <Module1
            ref="Module1"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module4
            ref="Module4"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module4Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module7
            ref="Module7"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
          <!-- <div class="leftIcon" />
          <Module3 ref="Module3" :dept-code="userInfo.deptCode" />-->
        </div>
      </div>
      <div class="row">
        <div style="height: 32%" class="rowRadius">
          <Module2
            ref="Module2"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module6
            ref="Module6"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module9
            ref="Module9"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
      </div>
      <div class="row1">
        <div style="height: 32%" class="rowRadius">
          <Module5s ref="Module5s" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module5 ref="Module5" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module8 ref="Module8" :dept-code="userInfo.deptCode" @seeNotice="seeNotice" />
        </div>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
      <moduleDialog1
        v-if="moduleType == 'module1'"
        ref="moduleDialog1"
        :type="type"
        :rail-types="railTypes"
        :dept-code="userInfo.deptCode" />
      <moduleDialog2
        v-if="dialogTitle == '缺陷单位分布详情'"
        ref="moduleDialog2"
        :dept-code="type"
        :dept-id="type"
        :rail-types="railTypes" />
      <moduleDialog3 v-if="dialogTitle == '检测计划兑现详情'" ref="moduleDialog3" :type="CType" :rail-types="railTypes" />
      <moduleDialog4 v-if="dialogTitle == '周期检测覆盖详情'" ref="moduleDialog4" :type="CType" :rail-types="railTypes" />
      <moduleDialog5 v-if="dialogTitle == '分析进度详情'" ref="moduleDialog5" :type="CType" :rail-types="railTypes" />
      <moduleDialog6 v-if="dialogTitle == '检测数据详情'" ref="moduleDialog6 " :type="CType" :rail-types="railTypes" />
    </el-dialog>
    <div class="moduleDialog3">
      <el-dialog :title="dialogTitle3" :visible.sync="dialogVisible3" width="70%">
        <moduleDialog3 v-if="dialogTitle3 == '检测计划兑现详情'" ref="moduleDialog3" :type="CType" :rail-types="railTypes" />
      </el-dialog>
    </div>
    <el-dialog title="通知公告" :visible.sync="seeNoticeShow" width="70%">
      <seeNotice
        ref="seeNotice"
        :see-notice-date="seeNoticeDate"
        :see-notice-item="seeNoticeItem"
        :see-notice-index="seeNoticeIndex"
        @seeNotice="seeNotice" />
    </el-dialog>
  </div>
</template>
<script>
import { getOverCycleWarning } from '@/api/cms/index/index.js'
import { checkRedirectUrlPermission } from '@/api/main'
import Module1 from './components/module1.vue'
import Module2 from './components/module2.vue'
import Module4 from './components/module4.vue'
import Module5s from './components/module5s.vue'
import Module5 from './components/module5.vue'
import Module6 from './components/module6.vue'
import Module7 from './components/module7.vue'
import Module8 from './components/module8.vue'
import Module9 from './components/module9.vue'
import moduleDialog1 from './components/moduleDialog1.vue'
import moduleDialog2 from './components/moduleDialog2.vue'
import moduleDialog3 from './components/moduleDialog3.vue'
import moduleDialog4 from './components/moduleDialog4.vue'
import moduleDialog5 from './components/moduleDialog5.vue'
import moduleDialog6 from './components/moduleDialog6.vue'
import seeNotice from './components/seeNotice.vue'
import { mapGetters } from 'vuex'
import store from '@/store'
import bus from './bus'
export default {
  components: {
    Module1,
    Module2,
    Module5s,
    Module4,
    Module5,
    Module6,
    Module7,
    Module8,
    Module9,
    moduleDialog1,
    moduleDialog2,
    moduleDialog3,
    moduleDialog4,
    moduleDialog5,
    moduleDialog6,
    seeNotice
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      checked2: false,
      checked1: true,
      railTypes: 'GT,PT',
      dialogVisible: false,
      dialogTitle: '',
      CType: '',
      type: '',
      moduleType: '',
      dialogTitle3: false,
      dialogVisible3: false,
      seeNoticeShow: false,
      seeNoticeDate: [],
      seeNoticeItem: {},
      seeNoticeIndex: 0,
      timer_1: null,
      timer_2: null
    }
  },
  activated() {
    this.timer_1 = setTimeout(() => {
      this.getOverCycleWarning(0) // 查询设备超周期预警提醒信息
    }, 60000) // 60000
  },
  deactivated() {
    clearTimeout(this.timer_1)
    clearTimeout(this.timer_2)
  },
  mounted() {
      bus.$on('dialogMoreClick',() => {
        this.dialogVisible = false
        this.dialogVisible3 = false
      });
  },
  methods: {
    // 查询设备超周期预警提醒信息
    getOverCycleWarning(count) {
      if (count <= 1) {
        // 查询设备超周期预警提醒信息
        getOverCycleWarning({ unitCodeParams: this.unitCodeParams }).then(response => {
          if (response.data[0].remindCount !== 0 || response.data[0].overdueCount !== 0) {
            var message = ``
            if (response.data[0].remindCount !== 0) {
              message += `<div class="message-notify"><span class="yellow-text">提醒</span>：有<strong class="supervising-tasks yellow-text"> ${response.data[0].remindCount} </strong>个设备马上快到该维修的时间！</div>`
            }
            if (response.data[0].overdueCount !== 0) {
              message += `<div class="message-notify"><span class="red-text">告警</span>：有<strong class="supervising-tasks red-text"> ${response.data[0].overdueCount} </strong>个设备已经过了该维修的时间！</div>`
            }
            message += `<div id="messageTrack_0" class="messageTrack-btn">立即查看</div>`
            this.$notify({
              title: '设备超周期提示',
              type: 'warning',
              position: 'bottom-right',
              duration: 5000,
              dangerouslyUseHTMLString: true,
              message: message
            })
            count++
            this.timer_2 = setTimeout(() => {
              this.getOverCycleWarning(count) // 查询设备超周期预警提醒信息
            }, 300000) // 300000
            // 监听鼠标点击事件
            document.addEventListener('mouseup', (e) => {
              const _track_0 = document.getElementById('messageTrack_0')
              if (_track_0) {
                if (_track_0.contains(e.target)) {
                  this.gotoComponentPage('设备维修超期预警')// 事件
                }
              }
            })
          }
        })
      }
    },

    // 跳转到管理端
    gotoComponentPage(type) {
      var obj = {}
      if (type === '设备维修超期预警') {
        obj = {
          appCode: 'AQSC',
          appUrlAttrList: [{ redirectUri: '/module/JCWAQSC/SBZQJCJK/goToURL/jcwsc/periodic/repair/OverdueWarning' }],
          clientId: 'cdtye-itps-jcwsc-client2',
          appName: '安全生产管理',
          id: 'ac128d6dbb0647c7940fa5912cc2bdf7',
          target: 'iframe'
        }
      }
      this.gotoSubSystem(obj)
    },

    // 点击子系统跳转
    gotoSubSystem(item) {
      // 查询跳转的子系统地址，是否有权限，防止跳转404
      checkRedirectUrlPermission({ appCode: item.appCode, redirectUrl: item.appUrlAttrList[0].redirectUri }).then((res) => {
        if (!res.data || res.data === '') {
          this.$confirm('系统识别您暂无权限进入，请联系管理员处理', '提示', {
            confirmButtonText: '知道了',
            showCancelButton: false,
            type: 'warning'
          })
            .then(() => {})
        } else {
          localStorage.setItem('appId', '')
          localStorage.setItem('clientId', item.clientId)
          localStorage.setItem('appName', item.appName)
          localStorage.setItem('platformName', '')
          var redirectUri = res.data
          if (redirectUri.indexOf('/module') !== -1) {
            localStorage.setItem('appId', item.id)
            localStorage.setItem('appName', item.appName)
          }

          window.location.assign(redirectUri) // 跳转页面
        }
      })
    },

    checkChange() {
      if (this.checked1 && this.checked2) {
        this.railTypes = 'GT,PT'
      } else if (this.checked1 && this.checked2 === false) {
        this.railTypes = 'GT'
      } else if (this.checked1 === false && this.checked2) {
        this.railTypes = 'PT'
      } else {
        this.railTypes = ''
      }
    },
    module1Click(val) {
      console.log(val)
      this.CType = val.CType
      if (val.type) {
        this.type = val.type
      }
      if (val.moduleType) {
        this.moduleType = val.moduleType
      }
      if (val.type === 2) {
        this.dialogTitle = '已销号缺陷信息详情'
      } else if (val.type === 3) {
        this.dialogTitle = '未销号缺陷信息详情'
      } else if (val.type === 4) {
        this.dialogTitle = '一级缺陷信息详情'
      } else if (val.type === 5) {
        this.dialogTitle = '二级A类缺陷信息详情'
      } else if (val.type === 6) {
        this.dialogTitle = '二级B类缺陷信息详情'
      } else {
        this.dialogTitle = val.title
      }
      this.dialogVisible = true
    },
    module4Click(val) {
      console.log(val)
      this.CType = val.CType
      this.dialogTitle3 = val.title
      this.dialogVisible3 = true
    },
    seeNotice(val) {
      this.seeNoticeDate = val.data
      this.seeNoticeItem = val.item
      this.seeNoticeIndex = val.index
      this.seeNoticeShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.bgu {
  background: url("./welcome.png");
}
.content {
  width: 100%;
  height: calc(100% - 100px);
  padding: 40px 10px;
  padding-top: 0;
  color: #fff;
  z-index: 100;
  display: flex;
  justify-content: space-between;
}
.row {
  width: 36%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row1 {
  width: 26%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rowRadius {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(26, 57, 124, 0.6) 0%,
    rgba(26, 48, 104, 0.6) 56.6%
  );
  border: 1px solid #5471ff;
}
.leftIcon {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 1px;
  background-color: #0054a2;
}
.leftIcon::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: #0085ff;
}
/deep/.el-dialog {
  background: linear-gradient(0deg, #000d3d, #000d3d),
    linear-gradient(0deg, #000d3d, #000d3d), #000d3d !important;
  border: 1px solid #5471ff !important;
  box-sizing: border-box;
}
/deep/ .el-dialog .el-dialog__header {
  height: 54px;
  background: transparent !important;
  border-bottom: 1px solid #5471ff;
  font-weight: bold;
  font-size: 18px;
}
/deep/ .el-dialog .el-dialog__body {
  height: calc(900px - 54px);
  padding: 20px;
}
.moduleDialog3 /deep/.el-dialog .el-dialog__body {
  height: 536px !important;
  padding: 20px;
}
/deep/ .el-dialog__headerbtn {
  width: 20px;
  height: 20px;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  display: block;
}
.leftIcon::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  right: 0;
  width: 20px;
  height: 3px;
  background-color: #0085ff;
}
.check {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 40px;
}
/deep/.el-checkbox,
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  font-size: 14px;
  color: #cce7ff;
}
/deep/ .el-checkbox__inner {
  background: transparent;
  border: 1px solid #3282fb;
}
.header {
  width: 100%;
  height: 85px;
  position: relative;
  background: url(./navbar3.png) no-repeat center;
   background-size: cover;
}
</style>
